<template>
    <div>
        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
        <el-tag :type= powerT>{{powerN}}</el-tag>
        <p>{{userName}}</p>


<!--            <h5>默认颜色</h5>-->
<!--            <el-menu-->
<!--                    default-active="2"-->
<!--                    class="el-menu-vertical-demo"-->
<!--                    @open="handleOpen"-->
<!--                    @close="handleClose">-->
<!--                <el-submenu index="1">-->
<!--                    <template slot="title">-->
<!--                        <i class="el-icon-location"></i>-->
<!--                        <span>导航一</span>-->
<!--                    </template>-->
<!--                    <el-menu-item-group>-->
<!--                        <template slot="title">分组一</template>-->
<!--                        <el-menu-item index="1-1">选项1</el-menu-item>-->
<!--                        <el-menu-item index="1-2">选项2</el-menu-item>-->
<!--                    </el-menu-item-group>-->
<!--                    <el-menu-item-group title="分组2">-->
<!--                        <el-menu-item index="1-3">选项3</el-menu-item>-->
<!--                    </el-menu-item-group>-->
<!--                    <el-submenu index="1-4">-->
<!--                        <template slot="title">选项4</template>-->
<!--                        <el-menu-item index="1-4-1">选项1</el-menu-item>-->
<!--                    </el-submenu>-->
<!--                </el-submenu>-->
<!--                <el-menu-item index="2">-->
<!--                    <i class="el-icon-menu"></i>-->
<!--                    <span slot="title">导航二</span>-->
<!--                </el-menu-item>-->
<!--                <el-menu-item index="3" disabled>-->
<!--                    <i class="el-icon-document"></i>-->
<!--                    <span slot="title">导航三</span>-->
<!--                </el-menu-item>-->
<!--                <el-menu-item index="4">-->
<!--                    <i class="el-icon-setting"></i>-->
<!--                    <span slot="title">导航四</span>-->
<!--                </el-menu-item>-->
<!--            </el-menu>-->


    </div>


</template>

<script>
    export default {
        created:function f() {
            var radom = Math.floor(Math.random()*3);
            this.powerT = this.powerType[radom];
            this.powerN = this.powerName[radom];
        },
        name: "aside",
        data(){
            return{
                powerType:['info','success','warning','danger'],
                powerName:['未认证用户','认证用户','管理员','封禁用户'],
                powerT:'info',
                powerN:'未认证用户',
                userName:'用户_error',
                circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    p{
        font-size: 26px;
    }
</style>
